<template>
  <section class="regist-doc">
    <div class="inner">
        <div class="regist-header">
            <img src="./img/registshop.png" alt="img">
        </div>
        <div class="step-box">
            <Steps :current="currenStep">
                <Step title="填写商家名称" ></Step>
                <Step title="填写商家基本信息"></Step>
                <Step title="上传商家资质"></Step>
            </Steps>
        </div>
        <div class="step1" v-if="currenStep === 0">
            <p class="tips">请填写您要注册的商家名称：</p>
           <span class="pink" style="position: relative;left: -16px;top: 26px;">*</span>
            <Input v-model="formItem.shopname"></Input>
            <Button type="primary"
                    size="large"
                    style="width: 300px;margin-top: 36px;margin-bottom: 164px"
                    @click="currenStep = 1">
                下一步
            </Button>
        </div>
        <div class="step2" v-if="currenStep === 1">
            <p class="need-enter">
               一下内容带“*”号的为必填项，为确保审核通过，请您填写真实有效的信息。
            </p>
            <Form :model="formItem"
                  ref="formValidate"
                  :rules="ruleValidate"
                  label-position="right" :label-width="90">
                <FormItem label="商家名称：">
                    <span>{{formItem.shopname}}</span>
                </FormItem>
                <FormItem label="品牌简称：" prop="brand">
                    <Input v-model="formItem.brand" style="width: 187px"  placeholder="品牌简称..." />
                </FormItem>
                <FormItem label="成立时间：" prop="date">
                    <DatePicker type="date" placeholder="选择成立时间" v-model="formItem.date"></DatePicker>
                </FormItem>
                <FormItem label="所在地区：" prop="detail">
                    <Select v-model="formItem.pro" style="width:110px">
                        <Option v-for="item in proList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    &nbsp;&nbsp;
                    <Select v-model="formItem.city" style="width:110px">
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    &nbsp;&nbsp;
                    <Select v-model="formItem.dis" style="width:110px">
                        <Option v-for="item in disList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    <div style="height: 10px"></div>
                    <Input v-model="formItem.detail" type="textarea" :rows="2" placeholder="详细地址..." />
                </FormItem>
                <FormItem label="商家介绍：" prop="desc">
                    <Input v-model="formItem.desc" type="textarea" :rows="4" placeholder="简介内容..." />
                </FormItem>
            </Form>
            <div style="text-align: center;margin-top: 36px;margin-bottom: 164px">
                <Button type="primary"
                        size="large"
                        style="width: 300px;" @click="currenStep = 2">
                    下一步
                </Button>
                <span class="pink" @click="currenStep = 0">
                    &nbsp;&nbsp;&nbsp;&nbsp;返回上一步
                </span>
            </div>
        </div>
        <div class="step3" v-if="currenStep === 2">
            <p class="info" style="text-align: center">请上传商家资质文件照片以便我们对您商家的资质进行审核</p>
            <p class="info" style="text-align: center">（资质信息只有您自己能看到，不会显示给其他人）</p>
            <div class="uoload-box">
                <Upload action="//jsonplaceholder.typicode.com/posts/" style="display: inline-block">
                    <div class="upload-btn">商家资格证书首页与 详细信息页</div>
                </Upload>
                <Upload action="//jsonplaceholder.typicode.com/posts/" style="display: inline-block">
                    <div class="upload-btn">商家执业证书首页与 详细信息页</div>
                </Upload>
                <p class="tip">*请上传扫描件或照片，法人名称、注册资本等敏感信息可打马赛克</p>
            </div>
            <div class="form-box">
              <p class="info" style="margin-bottom: 10px">您的联系方式</p>
              <Form :model="formItem"
                      ref="formValidate"
                      :rules="ruleValidate"
                      label-position="right" :label-width="90">
                    <FormItem label="姓名：" prop="name">
                        <Input v-model="formItem.name" style="width: 200px"/>
                    </FormItem>
                  <FormItem label="手机：" prop="mobile">
                      <Input v-model="formItem.mobile" style="width: 200px"/>
                  </FormItem>
                  <FormItem label="座机：" prop="phone">
                      <Input v-model="formItem.phone" style="width: 200px"/>
                  </FormItem>
                  <FormItem label="QQ：" prop="qq">
                      <Input v-model="formItem.qq" style="width: 200px"/>
                  </FormItem>
                  <FormItem label="Email：" prop="email">
                      <Input v-model="formItem.email" style="width: 200px"/>
                  </FormItem>
                  <FormItem label="身份：" prop="role">
                      <RadioGroup v-model="formItem.role">
                          <Radio label="1">医生本人</Radio>
                          <Radio label="2">医生市场部</Radio>
                          <Radio label="3">医生销售部</Radio>
                          <Radio label="4">医生客服部</Radio>
                      </RadioGroup>
                  </FormItem>
                </Form>
            </div>
            <div style="text-align: center;margin-top: 36px;margin-bottom: 164px">
                <Button type="primary"
                        size="large"
                        style="width: 300px;">
                    完成
                </Button>
                <span class="pink" @click="currenStep = 1">
                    &nbsp;&nbsp;&nbsp;&nbsp;返回上一步
                </span>
            </div>
        </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'RegistShop',
  components: {

  },
   data () {
      return {
          currenStep: 0,
          formItem: {
              shopname: '',
              date: '',
              pro: '',
              city: '',
              dis: '',
              detail: '',
              desc: '',
              name: '',
              mobile: '',
              email: '',
              role: ''
          },
          proList: [
              {
                  value: 1,
                  label: '北京'
              },
              {
                  value: 2,
                  label: '河北'
              },
              {
                  value: 3,
                  label: '江苏'
              },
          ],
          cityList: [
              {
                  value: 1,
                  label: '徐州市'
              },
              {
                  value: 2,
                  label: '南京市'
              },
          ],
          disList: [
              {
                  value: 1,
                  label: '鼓楼区'
              },
              {
                  value: 2,
                  label: '云龙区'
              },
          ],
          ruleValidate: {
              brand: [
                  {required: true, message: '请填写内容', trigger: 'blur'}
              ],
              detail: [
                  {required: true, message: '请填写内容', trigger: 'blur'}
              ],
              date: [
                  {required: true, message: '请填写内容', trigger: 'blur'}
              ],
              desc: [
                  {required: true, message: '请填写内容', trigger: 'blur'}
              ],
              name: [
                  {required: true, message: '请填写内容', trigger: 'blur'}
              ],
              mobile: [
                  {required: true, message: '请填写内容', trigger: 'blur'}
              ],
              email: [
                  {required: true, message: '请填写内容', trigger: 'blur'}
              ],
              role: [
                  {required: true, message: '请填写内容', trigger: 'blur'}
              ]
          }
      }
   },
    created () {
    },
    methods: {
    }
}
</script>

<style lang="less" scoped>
  @import "../../style/style.less";
  .regist-doc {
    background: #fff;
    padding: 20px 30px;
      border-radius: 6px;
      .step-box {
          width: 860px;
          margin: 54px auto 86px;
          padding-left: 150px;
      }
      .step1 {
          margin: 0 auto;
          width: 300px;
          .tips {
              font-size: 16px;
              color: #666;
          }
      }
      .step2 {
          width: 858px;
          margin: 0 auto;
      }
      .step3 {
          width: 528px;
          margin: 0 auto;
      }
      .uoload-box {
          text-align: center;
          margin: 20px;
          .upload-btn {
              width: 120px;
              height: 110px;
              padding-top: 38px;
              vertical-align: middle;
              color: @theme-color;
              border:1px dotted @border-color;
              margin-right: 10px;
          }
      }
      .need-enter {
          height: 40px;
          line-height: 40px;
          font-size: 16px;
          text-align: center;
          color: #de8a47;
          background-color: #ffd8b9;
          margin-bottom: 15px;
      }
      .info {
          font-size: 16px;
          color: #666;
          line-height: 1.6;
      }
      .tip{
          color: #999;
          font-size: 14px;
          text-align: left;
      }
  }
</style>
